<template>
  <article>
    <!--轮播图banner begin-->
    <div class="picsbox">
      <FirstRecommend></FirstRecommend>
      <!--banner end-->
    </div>
    <div class="blank"></div>

    <!-- 新闻和公告 -->
    <div>
      <!-- 风车分割栏 -->
      <div class="content-fenge">
        <Play></Play>
      </div>
      <div class="commonbox">
        <HotNews></HotNews>
      </div>
    </div>
    <!-- 活动剪影 -->
    <div
      class="commonbox"
      style="margin-top: 10px;"
    >
      <HotNotice></HotNotice>
    </div>
    <!-- 儿童故事 -->
    <div class="margin-t20 positive">
      <!-- 风车分割栏 -->
      <div class="content-fenge">
        <Play></Play>
      </div>
      <!--儿童故事动画视频 begin-->
      <div style="height: 490px;overflow: hidden;">
        <div class="title-img teshu"><img
            src="../../static/images/icon/tiaose.svg"
            alt=""
          >儿童故事</div>
        <div class="blogsbox">
          <div
            v-for="(temp,index) in storyList"
            class="blogs"
            data-scroll-reveal="enter bottom over 1s"
          >
            <h3 class="blogtitle">
              <a href="javascript:void(0);" @click="toDetail(temp)" >{{temp.title}}</a>   
            </h3>

            <span class="blogpic">
              <a  href="javascript:void(0);" @click="toDetail(temp)" title >                          
                <img v-if="temp.imgSrc" :src="preUrl+temp.imgSrc" alt  >                
              </a>
            </span>
            <p class="blogtext" v-highlight  v-html="temp.content" ></p>                         
            <!--活动详情 -->
          </div>

          <div class="isEnd">
            <!-- <span v-if="!isEnd">正在加载中~</span> -->
            <div
              class="loadContent"
              @click="loadContent"
              v-if="!isEnd&&!loading"
            >点击加载更多</div>

            <span v-if="isEnd">我也是有底线的~</span>
          </div>
        </div>
        <!--儿童故事动画视频 end-->

        <div class="sidebar"  style="position: absolute;top: 110px;right: 0;">
          <!-- 特别推荐 -->
          <ThirdRecommend></ThirdRecommend>
        </div>
      </div>
    </div>
    <!-- 课程体系 -->
    <div style="margin-top:10px">
      <!-- 风车分割栏 -->
      <div class="content-fenge">
        <Play></Play>
      </div>
      <div style="height: 520px;">
        <div class="title-img pad-l10"><img
            src="../../static/images/icon/book.svg"
            alt=""
          >课程体系</div>
        <div class="course">
          <el-tabs
            v-model="activeName"
            class="kecheng"
          >
            <el-tab-pane
              label="文化课"
              name="first"
            >
              <div class="content">
                <div class="lesson-list" v-for="(temp,index) in lessonList">
                  <div class="" data-scroll-reveal="enter bottom over 1s">
                    <img v-if="temp.imgSrc" :src="preUrl+temp.imgSrc" class="lesson-img" > 
                  </div>
                  <div class="lesson-body">
                    <span class="lesson-head">{{temp.title}}</span><br>
                    <div class="lesson-detail"><span class="item-head">培养目标：</span>
                    <span class="details"  v-highlight  v-html="temp.content">提高英语读写听说能力</span>
                  </div>
                    <!-- <div class="lesson-detail"><span class="item-head">适合人群：</span><span class="details">希望达到国际评测标准国内升学语言能力标准的孩子</span></div>
                    <div class="lesson-detail"><span class="item-head">课程特色：</span><span class="details">培养国际交流小外交官</span></div> -->
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane
              label="才艺课"
              name="fourth"
            >
              <div class="content">
                <div class="lesson-list">
                  <div class="">
                    <img
                      src="../../static/img/7211.png"
                      class="lesson-img"
                    >
                  </div>
                  <div class="lesson-body">
                    <span class="lesson-head">语文</span><br>
                    <div class="lesson-detail"><span class="item-head">培养目标：</span><span class="details">提高英语读写听说能力</span></div>
                    <div class="lesson-detail"><span class="item-head">适合人群：</span><span class="details">希望达到国际评测标准国内升学语言能力标准的孩子</span></div>
                    <div class="lesson-detail"><span class="item-head">课程特色：</span><span class="details">培养国际交流小外交官</span></div>
                  </div>
                </div>
                <div class="lesson-list">
                  <div class="">
                    <img
                      src="../../static/img/7212.png"
                      class="lesson-img"
                    >
                  </div>
                  <div class="lesson-body">
                    <span class="lesson-head">数学</span><br>
                    <div class="lesson-detail"><span class="item-head">培养目标：</span><span class="details">提高英语读写听说能力</span></div>
                    <div class="lesson-detail"><span class="item-head">适合人群：</span><span class="details"> 6 岁前的宝宝</span></div>
                    <div class="lesson-detail"><span class="item-head">课程特色：</span><span class="details">着眼点不在教宝宝系统全面的数学知识,而是在于引导宝宝对周围环境中的数、量、形、时间和空间等......</span></div>
                  </div>
                </div>
                <div class="lesson-list">
                  <div class="">
                    <img
                      src="../../static/img/7213.png"
                      class="lesson-img"
                    >
                  </div>
                  <div class="lesson-body">
                    <span class="lesson-head">英语</span><br>
                    <div class="lesson-detail"><span class="item-head">培养目标：</span><span class="details">提高英语读写听说能力,重点培养英语学习兴趣</span></div>
                    <div class="lesson-detail"><span class="item-head">适合人群：</span><span class="details">希望达到国际评测标准国内升学语言能力标准的孩子</span></div>
                    <div class="lesson-detail"><span class="item-head">课程特色：</span><span class="details">自然教学法非常注重幼儿具有良好的情绪、态度，因而主张通过轻松、愉快的环境创设来降低幼儿学习英语......</span></div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="sidebar">
          <!--四级推荐-->
          <FourthRecommend></FourthRecommend>
        </div>
      </div>
    </div>

    <!-- 留言板 -->
    <div style="margin-top:10px">
      <!-- 风车分割栏 -->
      <div class="content-fenge">
        <Play></Play>
      </div>
      <div style="height: 480px;">
        <MessageBoard></MessageBoard>
        <div class="sidebar">
          <!-- 友情链接-->
          <Link></Link>
        </div>
      </div>
    </div>
  </article>
</template>

<script>
import FirstRecommend from "../components/FirstRecommend";
import ThirdRecommend from "../components/ThirdRecommend";
import FourthRecommend from "../components/FourthRecommend";
import Play from "../components/Play";
import SubjectItemList from "../components/SubjectItemList";
import HotNews from "../components/HotNews";
import HotNotice from "../components/HotNotice";
import MessageBoard from "../components/MessageBoard";
import Link from "../components/Link";
import request from "../utils/request";

import { Loading } from "element-ui";
export default {
  name: "index",
  components: {
    // 注册组件
    FirstRecommend,
    FourthRecommend,
    ThirdRecommend,
    Play,
    HotNews,
    HotNotice,
    MessageBoard,
    Link,
    SubjectItemList,
  },
  data() {
    return {
      //儿童故事类
      lessonList:[],
      storyList: [],
      url: {
        storyList: "/sunNews/list",
        lessonList: "/sunNews/list",
      },
      currentPage: 1,
      pageSize: 15,
      activeName: "first", //课程体系的默认选中第一个
      total: 0, // 总数量
      isEnd: false, // 是否到底底部了
      loading: false, // 是否正在加载
   
      preUrl: "http://localhost:8080/jeecg-boot/sys/common/static/",
    };
  },

  mounted() {
    // 注册scroll事件并监听
    this.loading = false;
  },
  created() {
    this.getStoryList();
    this.getLessonList();
  },
  methods: {
    //跳转儿童故事详情页面
    toDetail(data) {
      this.$router.push("./subjectInfo?id=" + data.id);
    },
    //获取儿童故事
    getStoryList() {
      request
        .get(this.url.storyList, {
          params: {
            pageSize:6,
            category: 6,
          },
        })
        .then((res) => {
          if (res.data.success) {
            this.storyList = res.data.result.records;
            // console.log(this.storyList);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
     getLessonList() {
      request
        .get(this.url.lessonList, {
          params: {
            // pageSize:6,
            category: 7,
          },
        })
        .then((res) => {
          if (res.data.success) {
            this.lessonList = res.data.result.records;
            // console.log(this.lessonList);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },

    loadContent: function () {
      var that = this;
      that.loading = false;
      that.currentPage = that.currentPage ;
      var params = new URLSearchParams();
      params.append("currentPage", that.currentPage);
      params.append("pageSize", that.pageSize);

    },
  },
};
</script>

<style>
.isEnd {
  float: left;
  width: 100%;
  height: 80px;
  text-align: center;
}
.iconfont {
  font-size: 15px;
  margin-right: 2px;
}
</style>
